import React, { Component } from 'react'
import {Redirect} from 'react-router-dom'
import { Form, Input, Button, Checkbox } from 'antd';

import { UserOutlined, LockOutlined } from '@ant-design/icons';
import './login.less'
import logo from './img/logo192.png'
// import reqLogin from'../../api/index';
import storageUtils from '../../utils/storage'
// console.log(reqLogin)
// 登录页面
export default class Login extends Component {
     render() {
         //判断是否已经登录
         const user=storageUtils.getUser;
         console.log(user);
         if(user){
            // return <Redirect to='/'/>
         }
       const onFinish  = values => {
           
            const {username,password} =values;
            // const res=  reqLogin (username,password);
            // storageUtils.saveUser(user)
            this.props.history.replace('/')
        };
        return (
            <div className="login">
                <header className='login-head'>
                    <img src={logo} alt="Logo"  />
                    <h1>react项目：后台管理页面</h1>
                </header>
                <section className='login-content'>
                    <h2>用户登录1</h2>
                    <Form
                        name="normal_login"
                        className="login-form"
                        initialValues={{
                            remember: true,
                        }}
                        onFinish={onFinish}
                    >
                        <Form.Item
                            name="username"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入你的账户!',
                                },
                                {
                                    min: 4,
                                    message: '至少4位数!',
                                },
                                {
                                    max: 12,
                                    message: '至多12位数!',
                                },
                                // {
                                //     pattern: //,
                                //     message: '至少4位数!',
                                // },
                            ]}
                        >
                            <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
                        </Form.Item>
                        <Form.Item
                            name="password"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your Password!',
                                },
                            ]}
                        >
                            <Input
                                prefix={<LockOutlined className="site-form-item-icon" />}
                                type="password"
                                placeholder="Password"
                            />
                        </Form.Item>
                        <Form.Item>
                            <Form.Item name="remember" valuePropName="checked" noStyle>
                                <Checkbox>Remember me</Checkbox>
                            </Form.Item>
                        </Form.Item>

                        <Form.Item>
                            <Button type="primary" htmlType="submit" className="login-form-button">
                               登录
        </Button>
                        </Form.Item>
                    </Form>
                </section>
            </div>
        )
    }
}